<nz-layout>
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
      <div class="logo"></div>
      <ul nz-menu nzTheme="dark" nzMode="inline">
        <li nz-submenu nzTitle="User" nzIcon="user">
          <ul>
            <li nz-menu-item>Tom</li>
            <li nz-menu-item>Bill</li>
            <li nz-menu-item>Alex</li>
            <li nz-menu-item><a routerLink="fans" routerLinkActive="active">Fans</a></li>
            <li nz-menu-item><a routerLink="chat" routerLinkActive="active">Chat</a></li>
          </ul>
        </li>
        <li nz-submenu nzTitle="Team" nzIcon="team">
          <ul>
            <li nz-menu-item>Team 1</li>
            <li nz-menu-item>Team 2</li>
          </ul>
        </li>
        <li nz-menu-item>
          <i nz-icon nzType="file"></i>
          <span>File</span>
        </li>
      </ul>
    </nz-sider>
    <nz-layout>
      <nz-header>
        <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="isCollapsed = !isCollapsed"></i>
      </nz-header>
      <nz-content>
        <!-- <nz-breadcrumb>
          <nz-breadcrumb-item>Home</nz-breadcrumb-item>
          <nz-breadcrumb-item *ngFor="let crumb of breadcrumbs">
            {{crumb.text}}
          </nz-breadcrumb-item>
        </nz-breadcrumb> -->
        <app-breadcrumb></app-breadcrumb>
        <div class="inner-content">
        <router-outlet></router-outlet>
        </div>
      </nz-content>
      <nz-footer>Powered By Chen Lin</nz-footer>
    </nz-layout>
  </nz-layout>